<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    <style>
        body {
            /* background-image: url(../img/beijing111.jpg); */
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        .container{
            margin-top: 10%;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .denglu {
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 300px;
            height: 370px;
            box-shadow: 0 0 20px black;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.0);
            transition: 1s;
        }
        .zhuce{
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 300px;
            height: 370px;
            box-shadow: 0 0 20px black;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.0);
            opacity: 0;
            transition: 1s;
        }

        .form1 {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        input {
            
            width: 180px;
            height: 40px;
            margin-top: 30px;
            display: block;
        }

        .btn {
            width: 150px;
            height: 50px;
            border-radius: 20px;
            background-color: #0367a6;
            background-image: linear-gradient(90deg, #0367a6, #008997);
            color: white;
            border: 1px solid #0367a6;
            font-weight: bold;
            font-size: 15px;
            letter-spacing: 0.3rem;
        }
        .btn:hover{
            background: white;
            color: #0367a6;
        }
        a:link{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: cornflowerblue;
        }
        a:visited{
            color: crimson;
        }
    </style>
</head>

<body>
    <div class="container app">
        <div class="denglu" v-if="flag">
            <h2 style="margin-top: 30px;">欢迎登陆</h2>
            <a href="#" style="font-weight: bold;" class="denglu_btn" @click="falg=!falg" >没有账号，点击注册</a>
            <form action="" class="form1">
                <input type="text" placeholder="Account">
                <input type="password" placeholder="Password">
                <input class="btn" type="button" value="登录" ">            
            </form>
        </div>
        <div class="zhuce" v-if="flag">
                <h2 style="margin-top: 30px;">请您注册</h2>
                <a href="#" style="font-weight: bold;" class="zhuce_btn">已有账号，点击登录</a>
                <form action="" class="form1">
                    <input type="text" placeholder="Account">
                    <input type="password" placeholder="Password">
                    <input class="btn" type="button" value="注册" ">            
                </form>
        </div>
    </div>
    <script>
       const zhuce = document.querySelector('.zhuce')
        const denglu = document.querySelector('.denglu')
        const denglu_btn = document.querySelector('.denglu_btn')
        denglu_btn.addEventListener('click',nn)
        function nn (){
            zhuce.style.opacity = '1'
            denglu.style.opacity = '0'
        }
    </script>
</body>

</html>